<template>
  <div id="head">
    <el-row style="height: 64px;max-width: 1800px;margin: 0 auto" :gutter="0">
      <!--  这里是前面空白的地方  -->
      <el-col style="height: 62px;" :span="3">
        <div class="grid-content bg-purple">
        </div>
      </el-col>
      <!-- 这里是图片区  -->
      <router-link to="/">
        <el-col style="height: 62px;cursor: pointer;" :span="3">
          <div class="grid-content bg-purple">
            <img src="../assets/logo_steamworks.png" style="margin: 10px auto"/>
          </div>
        </el-col>
      </router-link>
      <!-- 这里是导航栏  -->
      <el-col style="height: 64px;margin-top: 2px;" :span="10">
        <div class="grid-content bg-purple">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#393e43"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="1">首页</el-menu-item>
            <el-submenu index="2">
              <template slot="title">文献库</template>
              <el-menu-item index="2-1">主页</el-menu-item>
              <el-menu-item index="2-2">入门指南</el-menu-item>
              <el-menu-item index="2-3">商店状态</el-menu-item>
              <el-menu-item index="2-4">功能</el-menu-item>
              <el-menu-item index="2-5">财务</el-menu-item>
              <el-menu-item index="2-6">销售与市场营销</el-menu-item>
              <el-menu-item index="2-7">Steamworks SDK</el-menu-item>
              <el-menu-item index="2-8">Steam VR</el-menu-item>
              <!--              <el-submenu index="2-4">-->
              <!--                <template slot="title">选项4</template>-->
              <!--                <el-menu-item index="2-4-1">选项1</el-menu-item>-->
              <!--                <el-menu-item index="2-4-2">选项2</el-menu-item>-->
              <!--                <el-menu-item index="2-4-3">选项3</el-menu-item>-->
              <!--              </el-submenu>-->
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">资源</template>
              <el-menu-item index="3-1">Steam VR</el-menu-item>
              <el-menu-item index="3-2">Steam 网吧计划</el-menu-item>
              <hr style="width: 90%;"/>
              <el-menu-item index="3-3">Steamworks 讨论区</el-menu-item>
              <el-menu-item index="3-4">Steamworks 视频教程</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">新闻与更新</template>
              <el-menu-item index="4-1">Steamworks 博客</el-menu-item>
              <el-menu-item index="4-2">Steam 博客</el-menu-item>
              <el-menu-item index="4-3">Steam VR 博客</el-menu-item>
            </el-submenu>
            <el-menu-item index="5"><a href="https://www.ele.me" target="_blank">客服</a></el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <!-- 这里是空白区  -->
      <el-col style="height: 62px;" :span="2">
        <div class="grid-content bg-purple">
        </div>
      </el-col>
      <!--  这里是右边  -->
      <el-col style="height: 62px;" :span="2">
        <!--  邮件   -->
        <div v-show="this.$store.state.islogin" style="width:80%;">
          <el-dropdown trigger="click">
             <span class="el-dropdown-link el-icon-message mymile">
             </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-chat-square">{{ mails[0] }}条新留言</el-dropdown-item>
              <el-dropdown-item icon="el-icon-s-order">{{ mails[0] }}件库存中的新物品</el-dropdown-item>
              <el-dropdown-item icon="el-icon-user">{{ mails[0] }}份新邀请</el-dropdown-item>
              <el-dropdown-item icon="el-icon-present">{{ mails[0] }}份新礼物</el-dropdown-item>
              <el-dropdown-item icon="el-icon-chat-line-square">{{ mails[0] }}条未读聊天消息</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 无所属单位 -->
          <span style="font-size: 10px; color:white;">
             {{ isBelonging }}
           </span>
        </div>
        <!--  姓名  -->
        <div v-show="this.$store.state.islogin" style="width:80%;">
          <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
              {{ username }}<i class="el-icon-arrow-down el-icon--right "></i>
              </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">注销</el-dropdown-item>
              <el-dropdown-item command="b">更改语言</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!--        &lt;!&ndash; 没有登录 &ndash;&gt;-->
        <!--        <div >-->
        <!--        <div v-show="!this.$store.state.islogin">-->
        <!--          <el-button type="primary" >登录</el-button>-->
        <!--        </div>-->
        <!--        </div>-->
      </el-col>
      <!--  头像  -->
      <el-col style="height: 62px;" :span="2">
        <img v-show="this.$store.state.islogin" style="float:left;margin-top: 14px"
             :src="userImgUrl">
      </el-col>
      <!--  这里是右空白  -->
      <el-col style="height: 62px;" :span="2">
        <div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: "Topbar",
  data() {
    return {
      msg: "这是主页",
      activeIndex: '1',
      username: '测试测试',
      mails: ['0', '0', '0', '0', '0'],
      isBelonging: '无所属单位',
      returnValue: '',
      userImgUrl: 'https://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb.jpg'
    }
  },
  created() {
    console.log('顶部页面被创建');

  },
  methods: {
    GotoLogin() {

    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleCommand(command) {
      this.$message('click on item ' + command);
    },
  },
  computed: {},
  filters: {},
  watch: {},
  components: {}
}
</script>

<style scoped>
#head {
  height: 62px;
  width: 100%;
  background-color: #393e43;

}

a {
  text-decoration: none;
}

mmm {
  background: #313131;
  box-shadow: 2px 2px 2px #545c64;
}

.footer {
  background-color: #393e43;
  color: white;
}

.mymile {
  height: 27px;
  width: 24px;
  background-color: #575451;
  text-align: center;
  line-height: 27px;
}

.liitem {
  text-align: left;
  margin-top: 3px;
}

.liitem a {
  color: white;
  font-size: 10px;
}

.liitem a:hover {
  color: gray;
  text-decoration: #8dc5ca;
}

.imgitem {
  font-size: 14px;
  color: white;
  text-align: left;
}

.imgitem a {
  color: gray;
  text-decoration-line: initial;
}

.imgitem a:hover {
  color: white;
  text-decoration: #8dc5ca;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
}

.row-bg {
  padding: 0px 0;
}

.el-dropdown-link {
  cursor: pointer;
  color: #8dc5ca;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
